{% extends 'layouts/base-fullscreen.html' %}

{% block title %} 初始化 {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}
    <style>
        .notyf__toast {
            max-width: 24em !important;
        }

        .notyf__ripple {
            height: 60em !important;
            width: 60em !important;
        }
    </style>
{% endblock stylesheets %}

{% block content %}

    <!-- Page content -->
    <div class="container mt--8 pb-5">
        <div class="row justify-content-center">
            {% if step == "4" or step == "2" or step == "3" %}
                <div class="col-lg-8 col-md-5">
            {% else %}
                <div class="col-lg-5 col-md-5">
            {% endif %}
            <div class="card bg-secondary shadow border-0">
                <div class="card-body">
                    <div class="text-center text-muted mb-4">
                        {% if step == "1" %}
                            <h2>欢迎！请点击开始以继续初始化</h2>
                        {% endif %}
                        {% if step == "2" %}
                            <h3>用户配置</h3>
                        {% endif %}
                        {% if step == "3" %}
                            <h2>博客配置</h2>
                        {% endif %}
                        {% if step == "4" %}
                            <h3>图床配置</h3>
                        {% endif %}
                        {% if step == "5" %}
                            <h3>Vercel 配置</h3>
                        {% endif %}
                        {% if step == "6" %}
                            <h3>恭喜您初始化完毕</h3>
                        {% endif %}
                    </div>
                    {% if step == "6" %}
                        <ul>请牢记您的登录信息：
                            <li>用户名: {{ username }}</li>
                            <li>密码: 您设定的值</li>
                            <a class="btn btn-primary my-4 text-white" href="/">登录控制台</a>
                        </ul>
                    {% endif %}
                    <form method="POST" id="main-form">
                        {% if step == "1" %}
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary my-4">开始</button>
                            </div>
                        {% endif %}
                        <input type="hidden" name="step"
                               value="{{ step }}">
                        {% csrf_token %}
                        {% if step == "2" %}
                            <hr class="my-4"/>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">API密钥</label>
                                        <input type="text" name="apikey" class="form-control"
                                               placeholder="留空即自动生成" value="{{ apikey }}">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">用户名</label>
                                        <input type="text" name="username"
                                               class="form-control" placeholder="设置用户名"
                                               value="{{ username }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">密码</label>
                                        <input type="text" name="password" class="form-control"
                                               placeholder="设置密码" value="{{ password }}">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">重复密码</label>
                                        <input type="text" name="repassword" class="form-control"
                                               placeholder="再次输入以确认密码"
                                               value="{{ repassword }}">
                                    </div>
                                </div>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary my-4">下一步</button>
                            </div>
                        {% endif %}
                        {% if step == "3" %}
                            <hr class="my-4"/>
                            <div class="pl-lg-4">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="form-control-label">服务商</label>
                                            <select name="provider" id="provider-container"
                                                    class="form-control"
                                                    onchange="change_provider(this.value)">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="form-control-label">使用配置</label>
                                            <select name="config" id="config-container"
                                                    class="form-control">
                                                {% for config in all_platform_configs %}
                                                <option value="{{ config }}">{{ config }}</option>
                                                {% endfor %}
                                            </select>

                                        </div>
                                    </div>
                                </div>
                                <div id="hexo-settings-container"></div>
                            </div>
                            <div class="text-center" id="submit-button">
                                {% if PROVIDER %}
                                    <input type="button" class="btn btn-secondary my-4"
                                           value="强制提交" onclick="query_force()">
                                {% endif %}
                                <button type="submit" class="btn btn-primary my-4">下一步</button>
                            </div>
                        {% endif %}
                        {% if step == "5" %}
                            <hr class="my-4"/>
                            <div class="form-group">
                                <label class="form-control-label">Vercel密钥</label>
                                <input type="text" name="token" class="form-control"
                                       placeholder="Vercel Token" value="{{ vercel_token }}">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">项目ID</label>
                                <input type="text" name="id" class="form-control"
                                       placeholder="Project ID"
                                       value="{{ project_id }}">
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary my-4">完成</button>
                            </div>
                        {% endif %}
                    </form>
                </div>
            </div>
            </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="queryModal" tabindex="-1" aria-labelledby="queryModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="queryModalLabel">提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <a id="question"></a>
                </div>
                <div class="modal-footer" id="query-footer">
                </div>
            </div>
        </div>
    </div>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}

    <script>
        {% if msg %}
            notyf.error(`{{ msg|safe }}`);
        {% endif %}

        function skip() {
            let temp = document.createElement("form");
            temp.action = "";
            temp.method = "post";
            temp.hidden = true;
            let opt = document.createElement("textarea");
            opt.name = "csrfmiddlewaretoken";
            opt.value = "{{ csrf_token }}";
            temp.appendChild(opt);
            opt = document.createElement("textarea");
            opt.name = "step";
            opt.value = "{{ step }}";
            temp.appendChild(opt);
            document.body.appendChild(temp);
            temp.submit();
        }


        {% if step == "3" %}
            const all_providers = {{ all_providers | safe }};
            {% if PROVIDER %}
                var now_provider = {{ PROVIDER | safe }};
                function query_force() {
                    $("#question").html("确定要强制提交吗？");
                    $("#query-footer").html(
                        `<button type="button" class="btn btn-secondary" data-dismiss="modal"
                                onclick="force_submit()">确定
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">取消
                        </button>`
                    );
                    $("#queryModal").modal("show");
                }
                function force_submit() {
                    $("#main-form").append("<input type='hidden' name='_force' value='1'>");
                    $("#main-form").submit();
                }
            {% else %}
                var now_provider = {};
            {% endif %}
            function change_provider(provider) {
                let params = all_providers[provider];
                let t = 0;
                let html = '';
                if (provider === now_provider["provider"]) {
                    for (let key in params) {
                        if (t % 2 === 0) {  // first param
                            html += `<div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">` +
                                params[key]["description"] +
                                `</label>
                                        <input type="text" name="` + key + `" class="form-control"
                                               placeholder="` + params[key]["placeholder"] + `"
                                               value="` + escapeString(now_provider["params"][key]) + `">
                                    </div>
                                </div>`
                            t += 1;
                        } else {
                            html += `<div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-control-label">` + params[key]["description"] + `</label>
                                    <input type="text" name="` + key + `" class="form-control"
                                           placeholder="` + params[key]["placeholder"] + `"
                                           value="` + escapeString(now_provider["params"][key]) + `">
                                </div>
                            </div>
                        </div>`
                            t += 1;
                        }
                    }
                    if (t % 2 === 1) {
                        html += '</div>';
                    }
                } else {
                    for (let key in params) {
                        if (t % 2 === 0) {  // first param
                            html += `<div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">` + params[key]["description"] + `</label>
                                        <input type="text" name="` + key + `" class="form-control"
                                               placeholder="` + params[key]["placeholder"] + `"
                                               value="">
                                    </div>
                                </div>`
                            t += 1;
                        } else {
                            html += `<div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-control-label">` + params[key]["description"] + `</label>
                                    <input type="text" name="` + key + `" class="form-control"
                                           placeholder="` + params[key]["placeholder"] + `"
                                           value="">
                                </div>
                            </div>
                        </div>`
                            t += 1;
                        }
                    }
                    if (t % 2 === 1) {
                        html += '</div>';
                    }
                }
                $("#hexo-settings-container").html(html);
            }

            let provider_container = "";
            for (let key in all_providers) {
                if (now_provider["provider"] === key) {
                    provider_container += `<option selected>` + key + `</option>`;
                    change_provider(key);
                } else {
                    provider_container += `<option>` + key + `</option>`;
                }
            }
            if (!now_provider["provider"]) {
                change_provider("github");
            }
            $("#provider-container").html(provider_container);
        {% endif %}

    </script>
{% endblock javascripts %}
